<template>
  <div class="map">
    <div class="h-map">
      <van-nav-bar title="位置" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <van-search v-model="search" placeholder="搜索地址" @input="searchs" class="ipt"/>
    <div class="search">
      <div class="list">
        <ul>
          <li v-for="item in list" @click="getCityAddress(item.title)" :key="item.uid">
            <p class="title">{{item.title}}</p>
            <p class="cont">地址：{{item.address}}</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="img">
      <div class="title">显示当前位置：</div>
      <div id="allmap"></div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      search: "",
      list: [],
      map: "",
    };
  },
  methods: {
    ...mapMutations(["getCity"]),
    onClickLeft() {
      this.$router.go(-1);
    },
    searchs() {
      var _this = this;
      var options = {
        onSearchComplete: function (results) {
          // 判断状态是否正确
          if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            _this.list = results.Hr;
          }
        },
      };
      var local = new BMap.LocalSearch(this.map, options);
      local.search(this.search);
    },
    getCityAddress(val) {
      this.getCity(val);
      this.$router.push({ path: "/home" });
    },
  },
  computed: {
    ...mapState(["addressInfo"]),
  },
  mounted() {
    var _this = this;
    var map = new BMap.Map("allmap");
    this.map = map;
    map.centerAndZoom(
      new BMap.Point(
        this.addressInfo.address.longitude,
        this.addressInfo.address.latitude
      ),
      14
    );
    var mk = new BMap.Marker(this.addressInfo.point);
    map.addOverlay(mk);
    map.panTo(this.addressInfo.point);
    var options = {
      onSearchComplete: function (results) {
        if (local.getStatus() == BMAP_STATUS_SUCCESS) {
          _this.list = results.Hr;
        }
      },
    };
    var local = new BMap.LocalSearch(map, options);
    local.search(this.search);
  },
};
</script>

<style lang="scss" scoped>
.map {
  position: relative;
  width: 375px;
  .h-map {
    position: fixed;
    width: 375px;
    top: 0;
    left: 0;
    z-index: 99;
  }
  .ipt{
    margin-top: 45px;
  }
  .search {
    width: 375px;
    height: 350px;
    overflow-y: scroll;
    .list {
      width: 100%;
      ul {
        width: 100%;
        li {
          width: 100%;
          height: 35px;
          text-indent: 18px;
          padding-bottom: 8px;
          box-sizing: border-box;
          .title {
            line-height: 18px;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .cont {
            line-height: 14px;
            font-size: 12px;
            margin-top: -12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .img {
    position: absolute;
    width: 375px;
    height: 217px;
    overflow: hidden;
    .title {
      font-size: 20px;
      text-indent: 4px;
      font-weight: 800;
      padding: 8px 0;
    }
    #allmap {
      width: 375px;
      height: 175px;
    }
  }
}
</style>